<!-- 问题 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">{{props.detail.title}}</text>
			<text class="desc">{{props.detail.description}}</text>
			<view class="tags">
				<text class="tag" v-for="(name, index) in props.detail.tag_list" :key="index">{{name}}</text>
			</view>
			<view class="pictures">
				<image class="pic" v-for="(path, index) in props.detail.photo_list" :key="index" :src="path"
					mode="aspectFill" @click="handlePreviewImage(path)">
				</image>
			</view>
			<view class="view">
				<text class="text">浏览 {{props.detail.views}}</text>
				<button class="delete-btn" @click="handleDelete()">删除</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import api from "@/api/index.js";

	const props = defineProps({
		detail: { // 详情数据
			type: Object,
			default: () => ({})
		}
	});

	// 预览图片
	const handlePreviewImage = (url) => {
		uni.previewImage({
			urls: [url]
		});
	}

	// 删除
	const handleDelete = () => {
		uni.showModal({
			title: '提示',
			content: '您确定要删除这个问题吗?',
			success: async (res) => {
				if (!res.confirm) return;
				
				await api.c_ask_api.delete({ id: props.detail.id });
				uni.$emit('refresh-my-ask-page'); // 刷新提问列表数据
				
				uni.showSuccessToast('删除成功', () => {
					uni.navigateBack();
				});
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx 0;
	}

	.content {
		padding: 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
		}

		.desc {
			display: block;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			margin-top: 16rpx;
		}

		.tags {
			display: flex;
			padding-top: 4rpx;
			margin-left: -20rpx;

			.tag {
				height: 54rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 54rpx;
				background: #F2F2F4;
				border-radius: 30rpx;
				padding: 0 20rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}
		}

		.pictures {
			display: flex;
			padding-top: 4rpx;
			margin-left: -30rpx;

			.pic {
				width: 152rpx;
				height: 152rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				margin-left: 30rpx;
			}
		}

		.view {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.text {
				font-size: 24rpx;
				color: #999999;
			}

			.delete-btn {
				font-size: 24rpx;
				color: #999999;
				background-color: transparent;
			}
		}
	}
</style>